<template>
	<view>

		<view style="padding: 20upx 0upx; text-align: center;background-color: #E93B3D;margin-bottom: 30upx;color: #FFFFFF;">
			<view>账户余额（元）</view>
			<view style="font-size: 60upx;margin-top: 20upx;margin-bottom: 10upx;">{{userInfo.BalanceProfits}}</view>
		</view>



		<view class="row b-b">
			<text class="tit">账号：</text>
			<input class="input" type="number" v-model="add" placeholder="对方手机号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">金额：</text>
			<input class="input" type="number" v-model="mn" placeholder="转账金额" placeholder-class="placeholder" />
		</view>
		<button :disabled="submitting" class="add-btn" @click="confirm">确认转账</button>

	</view>



</template>

<script>
	import {
		mapState,
	} from 'vuex';

	export default {
		data() {
			return {
				submitting: false,
				add: '',
				mn: 0
			}
		},
		computed: {
			...mapState(['token', 'exp_time', 'hasLogin', 'userInfo'])
		},
		onLoad() {
			console.log("onLoaduser")
		},
		onShow() {



		},
		methods: {

			confirm() {

				if (this.submitting == true) {
					return
				}

				this.submitting = true



				uni.request({
					url: this.$serverUrl + '/app/balance/trans',
					header: {
						"Content-Type": "application/json",
						"Authorization": this.token
					},
					data: {
						"mem_id": this.userInfo.MemId,
						"to_mem_mobile": this.add,
						"req_amount": Number(this.mn)
					},
					method: "POST",
					success: (e) => {

						let _this = this

						uni.showModal({
							content: e.data.message,
							showCancel: false,
							success: function(res) {
								_this.submitting = false
								_this.mn = 0
							}
						})



					},
					fail: (e) => {

						uni.showModal({
							content: e.errMsg,
						})

						console.log(e.errMsg)
					}
				})


			}



		}
	}
</script>


<style lang="scss">
	page {
		background: $page-color-base;
		// padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 250upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
